<template>
  <div class="register">
    <div class="avatar">
      <img class="logo" src="../assets/logo.png" alt>
    </div>
    <div class="text">
      <p>
        <span>海川云谷固定资产管理云平台</span>
      </p>
    </div>
    <el-form
      ref="ruleForm2"
      :model="ruleForm2"
      label-width="100px"
      class="demo-ruleForm container"
      status-icon
      :rules="rules2"
    >
      <div class="title">
        <span>企业注册</span>
      </div>
      <el-form-item label="企业名称" prop="company">
        <el-input
          type="company"
          v-model="ruleForm2.company"
          auto-complete="off"
          placeholder="请输入企业名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="user">
        <el-input type="user" v-model="ruleForm2.user" auto-complete="off" placeholder="请输入联系人姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input v-model.number="ruleForm2.tel" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input
          type="code"
          v-model="ruleForm2.code"
          auto-complete="off"
          placeholder="请输入验证码"
          style="width:150px;"
        ></el-input>
        <el-button type="primary" class="code-btn" @click="registerSubmit('form')">
          <router-link to>获取验证码</router-link>
        </el-button>
      </el-form-item>
      <el-form-item label="邮箱验证" prop="email">
        <el-input type="email" v-model="ruleForm2.email" auto-complete="off" placeholder="请输入邮箱账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="密码验证" prop="checkPass">
        <el-input
          type="checkPass"
          v-model="ruleForm2.checkPass"
          auto-complete="off"
          placeholder="请再次输入密码"
        ></el-input>
      </el-form-item>
      <div class="block">
        <!-- <span class="demonstration">默认</span> -->
        <el-slider v-model="value1"></el-slider>
      </div>
      <el-button type="primary" class="register-btn" @click="registerSubmit('form')">
        <router-link to="/Login">注册</router-link>
      </el-button>
    </el-form>
  </div>
</template>
           
<script>
import {register} from '../api/index.js';
export default {
  data() {
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入11位手机号"));
        }
      }, 1000);
      callback();
    };
    var checkCompany = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("公司名称不能为空"));
      } else {
        callback();
      }
    };
    var checkUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("联系人不能为空"));
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      } else {
        callback();
      }
    };
    var checkCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入正确的验证码"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm2: {
        pass: "",
        checkPass: "",
        company: "",
        user: "",
        tel: "",
        code: "",
        email: "",
        code: ""
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        tel: [{ validator: checkTel, trigger: "blur" }],
        company: [{ validator: checkCompany, trigger: "blur" }],
        user: [{ validator: checkUser, trigger: "blur" }],
        email: [{ validator: checkEmail, trigger: "blur" }],
        code: [{ validator: checkCode, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang = 'scss' scoped>
.register {
  position: fixed;
  width: 100%;
  height: 1000px;
  background: linear-gradient(
    180deg,
    rgba(0, 255, 255, 1) 0%,
    rgba(0, 255, 255, 1) 0%,
    rgba(153, 255, 153, 1) 100%,
    rgba(153, 255, 153, 1) 100%
  );
  .container {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    padding: 30px 40px 15px 40px;
    margin: 130px auto;
    background: white;
    border-radius: 2%;
  }
  .logo {
    border-width: 0px;
    position: absolute;
    left: 25px;
    top: 10px;
    width: 65px;
    height: 63px;
  }
  .text {
    border-width: 0px;
    position: absolute;
    left: 100px;
    top: 37px;
    width: 398px;
    height: 40px;
    font-family: "Arial-BoldMT", "Arial Bold", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 28px;
    color: #fff;
  }
  .register-btn {
    width: 100%;
  }
  .code-btn {
    margin: 0 0 0 30px;
  }
}
.title{
  font-size: 20px;
  color:#ccc;
  text-align: center;
  line-height: 20px;
  margin:10px 0;
  font-weight: 700;
}
</style>